<template>
    <div class="progress-wrap" ref="progressBarBgRef">
        <div class="outer" @click="turnPosition($event)" :style="{ backgroundColor: props.backgroundColor }">
            <div class="inner" :style="{ backgroundColor: props.progressColor, width: left * 100 + '%' }">
            </div>
        </div>
        <span class="slider" @mousedown.stop="down($event)" @touchstart.stop="down($event)" ref="pogressRef"
            :style="{ left: left * 100 + '%' }">
            <span class="slider-circle" :style="{ backgroundColor: props.sliderColor }"></span>
        </span>
    </div>
</template>
  
<script setup>
import { watch, ref, reactive, toRefs, onMounted, onUnmounted } from 'vue'

const props = defineProps({
    progress: {
        type: Number,
        default: 0
    },
    backgroundColor: {
        type: String,
        default: '#F7F7F7'
    },
    progressColor: {
        type: String,
        default: '#FFB530'
    },
    sliderColor: {
        type: String,
        default: '#FFB530'
    }
});

const emits = defineEmits(['setProgress'])

const state = reactive({
    left: 0,
    isDrag: false
});

watch(() => props.progress, (val) => {
    if (!state.isDrag) {
        state.left = val;
    }
});

const { left, isDrag } = toRefs(state);

let progressBarBgRef = ref(null)
let pogressRef = ref(null);

let position = {
    oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
    oriX: 0, // 移动开始时的x坐标
    maxLeft: 0, // 向左最大可拖动距离
    maxRight: 0 // 向右最大可拖动距离
};

//点击进度条某个位置播放
const turnPosition = (e) => {
    // console.log('turnPosition',e);
    // // console.log(this.$refs.audio.fastSeek);
    // // console.log("turnPosition", e, e.layerX);
    // // console.log(e.layerX, document.querySelector(".time-line").clientWidth);
    // // console.log(
    //     this.$refs.audio.duration,
    //     (e.layerX / document.querySelector(".time-line").clientWidth) *
    //     this.$refs.audio.duration
    // );
    // this.$refs.audio.currentTime =
    //     (e.layerX / document.querySelector(".time-line").clientWidth) *
    //     this.$refs.audio.duration;

    let pgsWidth = parseFloat(window.getComputedStyle(progressBarBgRef.value, null).width.replace('px', ''));
    let rate = e.offsetX / pgsWidth;
    state.left = rate;
    emits('setProgress', state.left);
    // console.log('state.left', state.left);


}

// function updateProgress(audio) {
//     let value = audio.currentTime / audio.duration;
//     document.getElementById('progressBar').style.width = value * 100 + '%';
//     document.getElementById('progressDot').style.left = value * 100 + '%';
// }

onMounted(() => {
});

onUnmounted(() => {
});

function down(event) {

    // console.log('down',event);
    // console.log('down-myOrientation',window.myOrientation);

    state.isDrag = true;

    position.oriOffestLeft = pogressRef.value.offsetLeft;

    if (window.myOrientation == 'landscape') {
        position.oriX = event.touches ? event.touches[0].clientX : event.clientX; // 要同时适配mousedown和touchstart事件
    } else {
        position.oriX = event.touches ? event.touches[0].clientY : event.clientY; // 要同时适配mousedown和touchstart事件
    }

    position.maxLeft = position.oriOffestLeft; // 向左最大可拖动距离
    position.maxRight = progressBarBgRef.value.offsetWidth - position.oriOffestLeft; // 向右最大可拖动距离

    // 禁止默认事件（避免鼠标拖拽进度点的时候选中文字）
    if (event && event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }

    // 禁止事件冒泡
    if (event && event.stopPropagation) {
        event.stopPropagation();
    } else {
        window.event.cancelBubble = true;
    }

    // 开始拖动
    document.addEventListener('mousemove', move);
    document.addEventListener('touchmove', move);

    // 拖动结束
    document.addEventListener('mouseup', end);
    document.addEventListener('touchend', end);
}

function move(event) {
    // console.log('move',event);
    // console.log('move-myOrientation',window.myOrientation);

    let clientX = 0; // 要同时适配mousemove和touchmove事件

    let touch = event.touches ? event.touches[0] : event;

    // console.log('touch',touch);
    // console.log('value', touch.clientX, touch.clientY);

    if (window.myOrientation == 'landscape') {
        clientX = touch.clientX; // 要同时适配mousedown和touchstart事件
    } else {
        clientX = touch.clientY; // 要同时适配mousedown和touchstart事件
    }
    
    // console.log('clientX',clientX);
    let length = clientX - position.oriX;
    if (length > position.maxRight) {
        length = position.maxRight;
    } else if (length < -position.maxLeft) {
        length = -position.maxLeft;
    }

    // console.log('length',length);
    let progressBarBg = progressBarBgRef.value;
    let pgsWidth = parseFloat(window.getComputedStyle(progressBarBg, null).width.replace('px', ''));
    let rate = (position.oriOffestLeft + length) / pgsWidth;
    state.left = rate;
    // // console.log('state.left',state.left);

    // audio.currentTime = audio.duration * rate;
    // updateProgress(audio);

}

function end() {
    state.isDrag = false;
    // // console.log('end', state.left);
    emits('setProgress', state.left);
    // 开始拖动
    document.removeEventListener('mousemove', move);
    document.removeEventListener('touchmove', move);

    // 拖动结束
    document.removeEventListener('mouseup', end);
    document.removeEventListener('touchend', end);

    // position = {
    //     oriOffestLeft: 0, // 移动开始时进度条的点距离进度条的偏移值
    //     oriX: 0, // 移动开始时的x坐标
    //     maxLeft: 0, // 向左最大可拖动距离
    //     maxRight: 0 // 向右最大可拖动距离
    // };
}

// const progressWidth = computed(() => {

//     // // console.log(props.value);
//     // // console.log(props.max);

//     // console.log('00000',(props.value / props.max) * 100);
//     return `${(props.value / props.max) * 100}%`;
// });

// const show = ref(props.open)
// watch(() => props.open, (val) => {
//     show.value = val;
// });

</script>
  
<style scoped>
.progress-wrap {
    background-color: transparent;
    /* overflow: hidden; */
    position: relative;
}

.outer {
    width: 100%;
    height: 6px;
    border-radius: 1000px;
    overflow: hidden;
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.inner {
    /* position: absolute;
    left: 0;
    top: 0; */
    /* width: 100%; */
    height: 100%;
    border-radius: 1000px;
    overflow: hidden;
}

.slider {
    position: absolute;
    left: 0%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.slider-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 1000px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

</style>
  